<div class="self-baodu">
  
  <!-- <app-left-line [width]="3" [height]="18" [background]="'#02ADBC'" [text]="'自报行度'"></app-left-line> -->
  
  <nz-spin nzTip="加载数据中..." [nzSize]="'large'" [nzSpinning]="nzDataLoading">
  <form class="left-main my-form" [formGroup]="formData">

    <div class="sub-title">
      <img src="assets/images/business/dyForm/one.svg" alt="">
      <span>基本信息</span>
    </div>

    <nz-form-item>
      <nz-form-label [nzSpan]="8" nzRequired [nzNoColon]="true">用户编号</nz-form-label>
      <nz-form-control  [nzSpan]="16">
        <nz-select *ngIf="!isPreview"
          style="width: 300px;"
          nzShowSearch
          nzAllowClear
          nzPlaceHolder="选择用户编号"
          formControlName="usageCode"
          (ngModelChange)="onUsageCodeChange()"
          [nzLoading]="nzLoading"
        >
          <nz-option 
            *ngFor="let item of usageCodeInfo; let i = index" 
              [nzLabel]="item.usageCode" [nzValue]="item.usageCode">
          </nz-option>
        </nz-select>
        <input *ngIf="isPreview"
          formControlName="usageCode" 
          nz-input />
        <app-err-msg *ngIf="formData.get('usageCode')?.dirty && formData.get('usageCode')?.invalid"
          errMsg="请选择用户编号"
        ></app-err-msg>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="8" [nzNoColon]="true" class="PingFangSC-Regular-14">户名</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <input 
          formControlName="name" 
          nz-input placeholder="户名" />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="8" [nzNoColon]="true" class="PingFangSC-Regular-14">用水地址</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <input formControlName="address" nz-input placeholder="用水地址" />
      </nz-form-control>
    </nz-form-item>

    <!-- <nz-form-item>
      <nz-form-label nzRequired [nzSpan]="8" [nzNoColon]="true">表码</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <nz-select *ngIf="!isPreview"
          style="width: 300px;"
          nzShowSearch
          nzAllowClear
          nzPlaceHolder="表码"
          formControlName="meterNo"
          (ngModelChange)="onMeterNoChange($event)"
        >
          <nz-option 
            *ngFor="let item of metorList; let i = index"
            [nzLabel]="item.madeNo" [nzValue]="item.madeNo"></nz-option>
        </nz-select>
        <input *ngIf="isPreview"
          formControlName="meterNo" 
          nz-input />
        <app-err-msg *ngIf="formData.get('meterNo')?.dirty && formData.get('meterNo')?.invalid"
          errMsg="表码不能为空"
        ></app-err-msg>
      </nz-form-control>
    </nz-form-item> -->

    <!-- <nz-form-item>
      <nz-form-label nzRequired [nzSpan]="8" [nzNoColon]="true" class="PingFangSC-Regular-14">安装位置</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <input 
          formControlName="meterAddr" nz-input placeholder="安装位置" />
      </nz-form-control>
    </nz-form-item> -->

    <nz-form-item>
      <nz-form-label nzRequired [nzSpan]="8"  [nzNoColon]="true" class="PingFangSC-Regular-14">水表行度</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <input type="text" (blur)="numValueChange(formData.get('num')?.value)" formControlName="num" nz-input placeholder="水表行度" />
        <app-err-msg *ngIf="formData.get('num')?.touched && formData.get('num')?.invalid"
          errMsg="输入范围：1-999999"
        ></app-err-msg>
      </nz-form-control>
    </nz-form-item>

    <!-- <nz-form-item>
      <span class="require-span">*</span>
      <nz-form-label [nzNoColon]="true" class="PingFangSC-Regular-14">月份</nz-form-label>
      <nz-form-control>
        <nz-month-picker style="width: 300px;" formControlName="month" nzPlaceHolder="请选择月份"></nz-month-picker>
        <app-err-msg *ngIf="formData.get('month')?.dirty && formData.get('month')?.invalid"
          errMsg="月份不能为空"
        ></app-err-msg>
      </nz-form-control>
    </nz-form-item> -->
  </form>
  </nz-spin>

  <div class="left-upload">
    <div class="sub-title">
      <img src="assets/images/business/dyForm/four.svg" alt="">
      <span>资料上传</span>
    </div>

    <app-file-upload 
      (uploadBack)="uploadBack($event)" 
      [title]="'现场水表照片上传'"
      [subTitle]="'请选择 “表位照片”和“表面照片”(必填)'"
      [uploadAvailable]="uploadAvailable"
      [deleteAvailable]="uploadAvailable"
      [previewIdStr]="fileIdStr"
      [required]="'true'"
    >
    <!-- [previewIdStr]="'d62f33ea-1d41-4be7-ad3b-d03975a8812b:0,2938e912-7045-497e-8039-27ec584eb900:0,2584999a-4074-43bc-94c4-d79d20e89096:0'" -->
    </app-file-upload>
  </div>

  <div class="form-btn">
    <div class="notPreview" *ngIf="!isPreview">
      <button class="form-btn-cancel" [nzLoading]="btnLoading" type="button" nz-button nzType="default" (click)=onReset()>取消</button>
      <button class="form-btn-ok" [nzLoading]="btnLoading" type="button" nz-button nzType="primary" (click)="onSubmit()">提交</button>
    </div>

    <div class="preview" *ngIf="isPreview">
      <button nz-button (click)="doBack()">返回</button>
    </div>
  </div>
</div>
